<script setup lang="ts">
import Search from '@/components/icons/Search.vue'
import { computed } from 'vue'
import { useVModel } from '@/hooks/useVModel'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])
const handleUpdate = (value) => {
  console.log(value)
  emit('update:modelValue', {
    ...props.modelValue,
    keyword: value
  })
}

const keyword = computed({
  get() {
    return props.modelValue.keyword
  },
  set(val) {
    console.log(val)
    emit('update:modelValue', {
      ...props.modelValue,
      keyword: val
    })
  }
})

const keyword2 = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    console.log(val)
    emit('update:modelValue', val)
  }
})

const keyword3 = computed({
  get() {
    return new Proxy(props.modelValue, {
      get(target, key) {
        return Reflect.get(target, key)
      },
      set(target, key, value) {
        console.log(value)
        emit('update:modelValue', {
          ...target,
          [key]: value
        })
        return true
      }
    })
  },
  set(val) {
    console.log('outer set')
    emit('update:modelValue', val)
  }
})

const keyword4 = useVModel(props, 'modelValue', emit)
</script>

<template>
  <el-input v-model="keyword4.keyword" :placeholder="keyword3.placeholder">
    <template #prepend>
      <el-select v-model="keyword4.selectedValue" placeholder="Select" style="width: 85px">
        <el-option
          v-for="item in keyword4.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search" />
    </template>
  </el-input>
</template>

<style scoped></style>
